<template>
  <div class="seedAdd">
    <div class="backFont"><el-button icon="el-icon-arrow-left" @click="back()">返回</el-button></div>
    <el-form
      :model="seedForm"
      ref="seedForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm errorForm"
    >
      <el-form-item class="noRequire" label="*种类：" prop="seedType">
        <el-select v-if="!$route.query.agriArcId" v-model="seedForm.seedType" class="input" placeholder="请选择">
          <el-option
            v-for="item in sysSeedList"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <div v-else class="greyColor">
          {{
            seedForm.seedType ? sysSeedList.find(item => {
              return seedForm.seedType === item.code ? item  : ''
            }).name : ''
          }}
        </div>
      </el-form-item>
      <el-form-item label="品种：">
        <el-input v-if="!$route.query.agriArcId" v-model="seedForm.seedInfo" class="input" placeholder="请输入品种"></el-input>
        <div v-else class="greyColor">
          {{ seedForm.seedInfo }}
        </div>
      </el-form-item>
      <el-form-item class="noRequire" label="*种植标准：" prop="plantingStandards">
        <div class="seedStandard">
          <ul>
            <li
              :class="{ active: seedForm.plantingStandards == item.id }"
              v-for="item in seedStandard"
              :key="item.id"
              @click="selectStandard(item.id)"
            >
              <img :src="item.icon" alt="" />
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-form-item>
      <el-form-item class="noRequire" label="*种植方式：" prop="plantingPatterns">
        <el-radio-group  v-if="!$route.query.agriArcId" v-model="seedForm.plantingPatterns">
          <el-radio :label="0">直播</el-radio>
          <el-radio :label="1" >移栽</el-radio>
        </el-radio-group>
        <div v-else class="greyColor">
          {{
            seedForm.plantingPatterns == 0 ? '直播' : '移栽'
          }}
        </div>
      </el-form-item>
      <el-form-item class="noRequire" label="*作业方式：" prop="seedWay">
        <!-- <el-radio-group v-model="seedForm.seedWay">
          <el-radio :label="0">人工</el-radio>
          <el-radio :label="1">机械</el-radio>
        </el-radio-group> -->
        <el-button
          class="typeBtn"
          :class="seedForm.seedWay == 0 && 'checkBoxAll'"
          @click="seedForm.seedWay = 0"
        >
          人工
        </el-button>
        <el-button
          class="typeBtn"
          :class="seedForm.seedWay == 1 && 'checkBoxAll'"
          @click="seedForm.seedWay = 1"
        >
          机械
        </el-button>
      </el-form-item>
      <el-form-item class="noRequire" :label="seedForm.plantingPatterns ===1 ? '*种植时间：':'*直播时间：' "  prop="time">
        <el-date-picker
          class="input"
          v-model="seedForm.time"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="noRequire"  label="*操作人：" prop="participantsId">
        <el-select v-model="seedForm.participantsId" class="input" @change="onSelectChange" placeholder="请选择操作人">
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="预计亩产" prop="desc">
        <el-input v-model="seedForm.desc">
          <template slot="append">公斤/亩</template>
        </el-input>
      </el-form-item> -->
      <!-- <div class="more" @click="more = !more" v-if="!more">更多设置...</div> -->
      <el-form-item label="种子数量：" v-if="!more">
        <el-input v-if="!$route.query.agriArcId" class="input widthSuffix" v-model="seedForm.num" placeholder="请输入种子数量">
          <template #suffix>
            <div class="suffixText">公斤/亩</div>
          </template>
        </el-input>
        <div v-else class="greyColor">
          <div v-if="seedForm.num">{{ seedForm.num }}公斤/亩</div>
        </div>
      </el-form-item>
      <el-form-item label="植株间距：" v-if="!more">
        <el-input v-if="!$route.query.agriArcId" class="input widthSuffix" v-model="seedForm.spacing" placeholder="请输入植株间距">
          <template #suffix>
            <div class="suffixText">cm</div>
          </template>
        </el-input>
        <div v-else class="greyColor">
          <div v-if="seedForm.spacing">{{ seedForm.spacing }}cm</div>
        </div>
      </el-form-item>
      <!-- <el-form-item class="submitItem">
        <el-button type="primary" class="submitBtn" @click="submitForm('seedForm')"
          >立即创建</el-button
        >
      </el-form-item> -->
    </el-form>
    <div class="submitBottom">
      <el-button
        size="small"
        class="editBtn editBtnNone"
        @click="back()"
        >取消</el-button
      >
      <el-button
        class="editBtn"
        type="primary"
        size="small"
        @click="submitForm('seedForm')"
        >
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
// import lvse from '@/assets/img/lvse.png'
import youji from '@/assets/img/youji.png'
import putong from '@/assets/img/putong.png'
import { AddSeedingApi } from '@/api/mission'
import { getSysSonDictListApi, getUserListApi } from '@/api/dict'
import { getSeedDetail, updateBySeed } from '@/api/agriLand'

export default {
  name: 'SevencolorUserFarmStockDialog',
  props: {
    // sysSeedList: {
    //   type: Array
    // },
    // userList: {
    //   type: Array
    // },
    landDetail: {
      type: Object
    }
  },

  data () {
    return {
      seedForm: {
        baseId: 1,
        landId: null,
        plantingStandards: null,
        plantingPatterns: 0,
        seedWay: 0
      },
      seedStandard: [
        // {
        //   id: 1,
        //   name: '绿色',
        //   active: false,
        //   icon: lvse
        // },
        {
          id: 1,
          name: '有机',
          active: false,
          icon: youji
        },
        {
          id: 0,
          name: '普通',
          active: false,
          icon: putong
        }
      ],
      more: false,
      rules: {
        seedType: [
          { required: true, message: '请选择种类', trigger: 'change' }
        ],
        plantingStandards: [
          { required: true, message: '请选择种植标准', trigger: 'change' }
        ],
        plantingPatterns: [
          { required: true, message: '请选择种植方式', trigger: 'change' }
        ],
        seedWay: [
          { required: true, message: '请选择作业方式', trigger: 'change' }
        ],
        participantsId: [
          { required: true, message: '请选择操作人', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      // ... 根据需要添加其他字段的校验规则
      },
      sysSeedList: [],
      userList: []
    }
  },

  mounted () {
    this.seedForm.landId = this.$route.query.landId
    this.getSysSeed()
    this.getDetail()
  },

  methods: {
    // 获取详情
    async getDetail () {
      if (!this.$route.query.agriArcId) {
        return
      }
      const { data } = await getSeedDetail({ agriArcId: this.$route.query.agriArcId })
      this.$set(this, 'seedForm', data)
      this.seedForm.time = this.$moment(this.seedForm.time.toString()).format('YYYY-MM-DD')
    },
    // 播种字典表
    async getSysSeed () {
      const res = await getSysSonDictListApi('ZZZL')
      // console.log(res)
      this.sysSeedList = res.data
      const res2 = await getUserListApi(this.$route.query.baseId)
      // console.log(res2)
      this.userList = res2.data
    },
    back () {
      this.$router.go(-1)
    },
    selectStandard (id) {
      // console.log(id)
      // const active = this.seedStandard.find((item) => item.id === id)
      this.seedForm.plantingStandards = id
      // active.active = true
      // this.seedStandard.forEach((item) => {
      //   if (item.id !== id) {
      //     item.active = false
      //   }
      // })
      // console.log(this.seedForm)
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.$route.query.agriArcId) {
            await updateBySeed(this.seedForm)
          } else {
            // this.seedForm.num = +this.seedForm.num
            this.seedForm.baseId = this.$route.query.baseId
            await AddSeedingApi(this.seedForm)
          }
          this.$router.go(-1)
        }
      })
    },
    // 操作人下拉事件
    onSelectChange (value) {
      const userInfo = this.userList.filter((item) => item.userId === value)
      this.seedForm.participants = userInfo[0].name
      // this.seedForm.participantsId = userInfo[0].userId
    }
  }

}
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  margin-top: 3vh;
  margin-bottom: 8vh
}
.seedStandard {
  ul {
    display: flex;
    padding-inline-start: 0;
    li {
      width: 80px;
      list-style-type: none;
      text-align: center;
      margin-right: 1.5208vw;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 40%;
        margin-top: 10px
      }
    }
  }
}
.active {
  border: 1px solid #00C586 !important;
  background: url("../../../assets/img/selected-ico.png") no-repeat right bottom;
}
.seedAdd {
}
.input {
  width: 250px;
}
.more {
   margin: 1vw 0;
   text-align: center;
}
.submitBtn {
  width: 5vw;
  margin: 0 6vw;
}
</style>
